<script setup>
import { computed, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, reactive, ref, watch } from 'vue';

// 这些是调用 setup 复杂写法
// export default{
//   setup(){
//     console.log('setup')
//     return{
//       msg: 'hello Vue3'
//     }
//   },
//   beforeCreate(){
//     console.log('beforeCreate')
//   },
// }

// 第二种简单赋值写法
// const msg ="hello Vue3";

const state = reactive({
  msg: "hello Vue333333333",
})
// 这是第一种事件写法
// const alterLog = () => {
//   alert("被点击了");
// };

// 这是第二种事件写法 且 ref 响应式写法
const totalCount = ref(0)
const addCount=()=>{
  totalCount.value=totalCount.value+10
}

const arr=ref (['张三','李四'])
const addPeople=()=>{
  arr.value.push('王五')
}

// 计算属性
const money = ref(100)
const disCount  =computed(()=>money.value*0.6)
const arr1=ref([1,2,3,4,5,6])
const arrDul = computed(()=>{
  return arr1.value.map(item=>item*2)
})

// watch监听
const count = ref(110)
// 单个监听
// watch(count,()=>{
//   console.log('count',count.value)
// })
// 第二种单个监听
watch(count,(newValue,oldValue)=>{
  console.log('count',{newValue,oldValue})
})
// 侦听多个参数
// watch(count,(newValue,oldValue)=>{
//   console.log([count,state.msg],{newValue,oldValue})
// })

// 生命周期函数
console.log('生命周期创建之前就执行了')

onMounted(()=>{
  console.log('1.2组件挂载完成')
})
onMounted(()=>{
  console.log('1.1组件挂载完成')
})

onBeforeUpdate(()=>{
  console.log('这个是挂在后，更新前吧？')
})
onUpdated(()=>{
  console.log('这个是更新了')
})

onBeforeUnmount(()=>{
  console.log('组件卸载了')
})

</script>

<template>
  <h1>Vue3</h1>
  <p>{{ state.msg }}</p>
  <h2>真棒！</h2>
  <p>{{ totalCount }}</p>
  <h3>{{ arr }}</h3>
  <button @click="state.msg='修改了数据'">点击</button>
  <button @click="addCount()">调用函数正向+1</button>
  <button @click="totalCount=totalCount+1">正常+1</button>
  <button @click="totalCount++">正常++</button>
  <button @click="addPeople()">加人民</button>
  <button @click="arr.push('赵四')">加赵四</button>
  <h4>原价：{{ money }}</h4>
<h4>折后价：{{ disCount }}</h4>
<button @click="money=money+100">打折</button>
<h5>{{ arr1 }}</h5>
<h5>{{ arrDul }}</h5>
<button @click="arr1.push(7)">加7</button>
<h6>{{ count }}</h6>
<button @click="count++">watch监听</button>
<!-- <button @click="state.msg += '~'">+{{ state.msg }}</button> -->


</template>

<style></style>
